<template>
	<view class="main-content">
		<view>
			<u-tabs-swiper ref="uTabs" :list="order" :current="current" @change="tabsChange" :is-scroll="false">
			</u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: calc(100vh - 80rpx);">
			<swiper-item class="swiper-item" v-for="(item, index) in order" :key="index" >
				<scroll-view>
					<view class="order-list">
						<navigator v-for="(item, index) in orderList" :key="index" hover-class="none"
							class="order-item bg-white mt20" :url="'/pages/order_details/order_details?id=' + item.id">
							<view class="order-header row-between">
								<view class="row">
									订单编号：{{item.order_sn}}
								</view>
								<view :class="item.order_status == 4 ? 'muted' : 'primary'">{{getOrderStatus(item.order_status)}}</view>
							</view>
							<view class="order-con">
								<order-goods :list="item.order_goods"></order-goods>
								<view class="all-price row-end">
									<text class="muted xs">共{{item.goods_count}}件商品，总金额：</text>
									<price-format :subscript-size="30" :first-size="30" :second-size="30"
										:price="item.order_amount"></price-format>
								</view>
							</view>
							<view class="order-footer row">
								<view v-if="item.order_status == 1">
									<button size="sm" class="plain br60 lighter mr20" hover-class="none"
										@tap.stop="cancelOrder(item.id)">
										发货
									</button>
								</view>
								<view>
									<navigator hover-class="none" :url="'/pages/order_details/order_details?id=' + item.id">
									<button size="sm" class="btn bg-primary br60 white" >
										订单详情
									</button>
									</navigator>
								</view>
							</view>
						</navigator>
						<loading-footer :status="status" :slot-empty="true" @refresh="reload">
							<view slot="empty" class="column-center" style="padding-top: 200rpx">
								<image class="img-null" src="/static/images/goods_null.png"></image>
								<text class="lighter">暂无订单</text>
							</view>
						</loading-footer>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import {
		getMerchantOrderList,
		cancelOrder,
		delOrder,
		confirmOrder
	} from '@/api/order';
	export default {
		data() {
			return {
				status:'loading',
				showLoading: true,
				current: 0,
				swiperCurrent: 0,
				order: [{
					name: '全部'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				orderList:[]
			}
		},
		onShow() {
			getMerchantOrderList().then(res => {
				console.log(res)
				this.orderList = res.data.list
			})
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e;
				this.swiperCurrent = e;
				var type = 'all'
				switch(e){
					case 0:
						var type = 'all'
						break;
					case 1:
						var type = 'shipments'
						break;
					case 2:
						var type = 'delivery'
						break;
					case 3:
						var type = 'finish'
						break;
				}
				getMerchantOrderList({
					type:type
				}).then(res => {
					console.log(res)
					this.orderList = res.data.list
				})
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let text = ''
					switch (status) {
						case 0:
							text = '待支付';
							break;
						case 1:
							text = '待发货';
							break;
						case 2:
							text = '待收货';
							break;
						case 3:
							text = '已完成';
							break;
						case 4:
							text = '订单已关闭';
							break;
					}
					return text
				}
			},
			getCancelTime() {
				return (time) => time - Date.now()/1000
			}
		}
	}
</script>
<style lang="scss">
	.main-content{
		min-height: calc(100vh);
	}
.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}

				}
			}
		}
	}
</style>
